<template>
  <div class="box">
    <div class="ulBox">
      <ul>
        <li>地区:</li>
        <li :class="{liActive:area=='全部'}" @click="area='全部'">全部</li>
        <li :class="{liActive:area=='内地'}" @click="area='内地'">内地</li>
        <li :class="{liActive:area=='港台'}" @click="area='港台'">港台</li>
        <li :class="{liActive:area=='欧美'}" @click="area='欧美'">欧美</li>
        <li :class="{liActive:area=='日本'}" @click="area='日本'">日本</li>
        <li :class="{liActive:area=='韩国'}" @click="area='韩国'">韩国</li>
      </ul>
      <ul>
        <li>类型:</li>
        <li :class="{liActive:type=='全部'}" @click="type='全部'">全部</li>
        <li :class="{liActive:type=='官方版'}" @click="type='官方版'">官方版</li>
        <li :class="{liActive:type=='原声'}" @click="type='原声'">原声</li>
        <li :class="{liActive:type=='现场版'}" @click="type='现场版'">现场版</li>
        <li :class="{liActive:type=='网易出品'}" @click="type='网易出品'">网易出品</li>
      </ul>
      <ul>
        <li>排序:</li>
        <li :class="{liActive:order=='上升最快'}" @click="order='上升最快'">上升最快</li>
        <li :class="{liActive:order=='最热'}" @click="order='最热'">最热</li>
        <li :class="{liActive:order=='最新'}" @click="order='最新'">最新</li>
      </ul>
    </div>
    <div class="BIGmv">
      <div class="mvBox" v-for="(item,index) in mvLists" :key="index">
        <div class="mvBoxImg">
          <img :src="item.cover" alt="" class="ima">
          <div class="playMvBg"><img src="../../assets/image/播放 (5).png" alt="" class="aa"></div>
          
          <div class="playNum">
            <img src="../../assets/image/播放 (4).png" alt="">
            <span>{{item.playCount}}次播放</span>
            </div>
          
        </div>
        <div class="tro">
          <div>{{item.name}}</div>
          <div style="font-size:12px">{{item.artistName}}</div>
        </div>
      </div>
    </div>  
    <div class="bb">
      <el-pagination
        background
        :limit="limit"
        @current-change='handleCurrentChange'
        :current-page="page"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
   
  </div>
</template>

<script>
import axios from 'axios'
import "../../assets/css/04.newMv.css";
export default {
  data() {
    return {
      mvLists:[],
      total:20,
      page:1,
     area:'全部',
     type:'全部',
     order:'上升最快',
     limit:'12',
    }
  },
  watch: {
    area(){
      this.page=1
      this.getmvLists()
    },
    type(){
      this.page=1
      this.getmvLists()
    },
    order(){
      this.page=1
      this.getmvLists()
    }
  },
  created() {
   this.getmvLists()
  },
  methods: {
    getmvLists(){
       axios({
      method:'get',
      url: "https://autumnfish.cn/mv/all",
      params: {
         area:this.area,
        type:this.type,
        order:this.order,
        limit:this.limit,
        offset:(this.page-1)*12
      }
    }).then(res=>{
      // console.log(res);
      this.mvLists=res.data.data
      if(res.data.count){
this.total=res.data.count/12
      }
      
      // this.mvLists.length=8
      for(let i=0;i<this.mvLists.length;i++){
        if (this.mvLists[i].playCount>10000) {
           this.mvLists[i].playCount=parseInt(this.mvLists[i].playCount/10000)+'万'
        }
      }
    })
    },
    handleCurrentChange(val){
     this.page=val//保存页码
          //重新获取列表
          this.getmvLists()
    }
  },
};
</script>

<style>
</style>